<header class="dock-header dock-header">
  <div class="dock-title">
    <span><i class="fa fa-commenting-o"></i></span>
    <span class="fs-13">Message Hossein</span>
  </div>

  <div class="dock-actions">
    <span title="Close" data-provide="tooltip" data-dock="close"></span>
    <span title="Maximize" data-provide="tooltip" data-dock="maximize"></span>
    <span title="Minimize" data-provide="tooltip" data-dock="minimize"></span>
  </div>
</header>

<div class="dock-body">
  <div class="scrollable" style="height:100%" data-provide="emoji">

    <div class="media media-chat">
      <img class="avatar" src="../assets/img/avatar/2.jpg" alt="...">
      <div class="media-body">
        <p>Hi</p>
        <p>How are you ...???</p>
        <p>What are you doing tomorrow?<br>Would you like to get out of the town for a while?</p>
        <p class="meta"><time datetime="2018">23:58</time></p>
      </div>
    </div>

    <div class="media media-meta-day">Today</div>

    <div class="media media-chat media-chat-reverse">
      <div class="media-body">
        <p>Hiii, I'm good.</p>
        <p>How are you doing?</p>
        <p>Long time no see!</p>
        <p class="meta"><time datetime="2018">00:06</time></p>
      </div>
    </div>

    <div class="media media-chat">
      <img class="avatar" src="../assets/img/avatar/2.jpg" alt="...">
      <div class="media-body">
        <p>Yeah</p>
        <p>We were out of country for a vacation. We visited several beautiful countries and made a lot of memmories. :stuck_out_tongue_winking_eye: :stuck_out_tongue_winking_eye:</p>
        <p class="meta"><time datetime="2018">00:07</time></p>
      </div>
    </div>

    <div class="media media-chat media-chat-reverse">
      <div class="media-body">
        <p>That's awesome!</p>
        <p>You should tell me everything with all small details. I'm so curious to hear your stories.</p>
        <p>Did you take pictures?</p>
        <p class="meta"><time datetime="2018">00:09</time></p>
      </div>
    </div>

    <div class="media media-chat">
      <img class="avatar" src="../assets/img/avatar/2.jpg" alt="...">
      <div class="media-body">
        <p>We took a loooot. Here is some of them, I'll show you the rest once we meet.</p>
        <p class="row gap-1" data-provide="photoswipe">
          <a class="col-4 d-inline-block" href="#"><img src="../assets/img/gallery/thumb-sm/8.jpg" alt="..."></a>
          <a class="col-4 d-inline-block" href="#"><img src="../assets/img/gallery/thumb-sm/11.jpg" alt="..."></a>
          <a class="col-4 d-inline-block" href="#"><img src="../assets/img/gallery/thumb-sm/7.jpg" alt="..."></a>
        </p>
        <p class="meta"><time datetime="2018">00:10</time></p>
      </div>
    </div>

    <div class="media media-chat media-chat-reverse">
      <div class="media-body">
        <p>These places are fantastic. Wish I could join you guys :disappointed: :disappointed:</p>
        <p class="meta"><time datetime="2018">00:10</time></p>
      </div>
    </div>

    <div class="media media-chat">
      <img class="avatar ml-0" src="../assets/img/avatar/2.jpg" alt="...">
      <div class="media-body">
        <p>You can actually. We are planning our next vacation for new year holidays :wink:</p>
        <p class="meta"><time datetime="2018">00:12</time></p>
      </div>
    </div>

    <div class="media media-chat media-chat-reverse">
      <div class="media-body">
        <p>Are you serious?!! :heart_eyes:</p>
        <p class="meta"><time datetime="2018">00:12</time></p>
      </div>
    </div>

  </div>
</div>

<footer class="publisher pl-12">
  <img class="avatar avatar-sm align-self-start" src="../assets/img/avatar/1.jpg" alt="...">
  <input class="publisher-input" placeholder="Write something">
  <div class="align-self-end gap-items">
    <span class="publisher-btn file-group">
      <i class="fa fa-paperclip file-browser"></i>
      <input type="file">
    </span>
    <a class="publisher-btn" href="#"><i class="fa fa-smile-o"></i></a>
  </div>
</footer>
